<template>
    <div>
        <!-- 面包屑导航 -->
        <breadcrumb></breadcrumb>
        <div class="control">
            <!-- 全部状态 -->
            <div class="inputItem">
                <div class="title">申请状态</div>
                <div class="inputBox">
                    <el-select class="select" v-model="status" placeholder="请选择">
                        <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">申请编号</div>
                <div class="inputBox">
                    <el-input v-model="driverWithdrawalNumber" @keyup.enter.native="cread"> </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">司机姓名</div>
                <div class="inputBox">
                    <el-input v-model="driverName" @keyup.enter.native="cread"> </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">创建时间</div>
                <el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </div>


            <!-- 查询 -->
            <el-button class="BtnStyle" type="primary" size="small" icon="el-icon-search" @click="cread">查询</el-button>
            <el-button class="BtnStyle" type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        </div>
        <div class="main">
            <div class="list">
                <el-table :data="records" style="width: 100%">
                    <el-table-column align="center" prop="serialNumber" label="序号" width="60">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="申请状态">
                        <template slot-scope="scope">
                            <div class="tag dispatched" v-if="scope.row.state == 1">
                                <div class="dian"></div>
                                <div class="text">已提现</div>
                            </div>

                            <div class="tag yellow" v-else>
                                <div class="dian"></div>
                                <div class="text">待提现</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="driverWithdrawalNumber" label="申请编号">
                    </el-table-column>
                    <el-table-column align="center" prop="driverName" label="司机姓名">
                    </el-table-column>
                    <el-table-column align="center" prop="openBankUser" label="开户人姓名">
                    </el-table-column>
                    <el-table-column align="center" prop="bankCardNumber" label="银行卡号">
                    </el-table-column>
                    <el-table-column align="center" prop="openBank" label="开户银行">
                        <template slot-scope="scope">
                            <div>{{ scope.row.openBank || '无' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="提现金额">
                        <template slot-scope="scope">
                            <div>{{ scope.row.withdrawalAmount }}元</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="createTime" label="创建时间" sortable width="127"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="small" v-if="scope.row.state == 1"
                                    @click.native="goUrl(scope.row.url)">查看凭证</el-button>
                            </div>
                            <div>
                                <el-button type="text" size="small" v-if="scope.row.state == 0"
                                    @click="showPaymentDialog(scope.row.driverWithdrawalId)">打款</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!--                <button @click="showPaymentDialog()">测试打款</button>-->
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
                    :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
                    <template slot>
                        <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total }}条,每页{{ pageSize }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>

        <el-dialog class="dialog" title="打款确认" :visible.sync="visiblePaymentBox" width="400px">
            <!-- action	必选参数，上传的地址 -->
            <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
            <!-- on-remove	文件列表移除文件时的钩子 -->
            <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->
            <!-- limit	最大允许上传个数 -->
            <!-- on-exceed	文件超出个数限制时的钩子 -->
            <!-- file-list	上传的文件列表,  -->

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="打款凭证">
                    <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
                        :on-change="handleChange" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed"
                        :on-success="onSuccess" :file-list="fileList" :headers="headers">
                        <el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
                        <span slot="tip" class="el-upload__tip">
                            支持PDF、JPG等格式
                        </span>
                    </el-upload>
                </el-form-item>
            </el-form>


            <span slot="footer" class="dialog-footer">
                <el-button class="cancelBtn" @click="visiblePaymentBox = false">取 消</el-button>
                <el-button class="submitBtn" type="primary" @click="dakuan()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";

export default {
    data() {
        return {
            pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
            /* 搜索start */
            driverWithdrawalNumber: "",
            createTime: [],//创建时间
            driverWithdrawalId: "",
            driverName: "",
            status: "",
            statusArr: [
                { label: "待打款", value: "0" },
                { label: "已打款", value: "1" },
            ],

            fileList: [],
            signImage: "",//文件上传成功后的返回的url
            form: {},
            url: BASEURL.TCHYURL + "/file/upload",
            headers: {
                Authorization: localStorage.getItem("token"),
            },
            /* 搜索end*/
            visiblePingBox: false,
            visiblePaymentBox: false, //打款确认弹窗显示/隐藏
            data: {
                total: "",
                size: "",
                pages: "",
            },
            records: [],
            pageCurrent: 1, //当前页码
            pageSize: "15", //每页15条
        };
    },
    methods: {
        getHttpList() {
            let params = {
                size: this.pageSize,
                current: this.pageCurrent,
                driverWithdrawalNumber: this.driverWithdrawalNumber,
                driverName: this.driverName,
                state: this.status,
                startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
				endTime: this.createTime != null ? this.createTime[1] : '', //结束时间

            };
            httpApi.financiaManagementApi.getDriverWithdrawalList(params).then((res) => {
                if (res.data.data.code = 200) {
                    this.records = res.data.data.records;
                    this.data = res.data.data;
                }
            })
        },
        goUrl(url) {
            window.open(url, "_blank");
        },
        dakuan() {
            let params = {
                url: this.signImage,
                driverWithdrawalId: this.driverWithdrawalId
            }
            httpApi.financiaManagementApi.auditWithdrawal(params).then((res) => {
                if (res.data.code = 200) {
                    this.visiblePaymentBox = false;
                    this.getHttpList();
                }
            })
        },
        cread() {
            this.getHttpList();
        },
        CleanUp() {
            this.driverWithdrawalNumber = ''
            this.driverName = ''
            this.status = ''
            this.createTime = []
            this.getHttpList()
        },

        showPingzheng(driverWithdrawalId) {
            this.visiblePingBox = true;
            this.driverWithdrawalId = driverWithdrawalId;
        },
        showPaymentDialog(driverWithdrawalId) {
            this.visiblePaymentBox = true;
            this.driverWithdrawalId = driverWithdrawalId;
        },

        // 	文件列表移除文件时的钩子
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        //点击文件列表中的文件，下载文件到本地
        handlePreview(file) {
            // console.log(file, '点击文件列表中已上传的文件时的钩子');
            this.file = file;
            // console.log('123123', file);

            if (file.response != undefined) {
                window.open(this.file.response.data.url);
            } else {
                window.open(this.fileList[0].url);
            }
        },
        //      <!-- on-exceed	文件超出个数限制时的钩子 -->
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件`
            );
        },
        // before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 获取文件名后缀
        getAfterFileName(string) {
            string.lastIndexOf(".");
            // console.log(string.lastIndexOf('.'));
            this.fileName = this.fileName.substring(string.lastIndexOf("."));
            // console.log('后缀', this.fileName);
        },
        // 文件上传成功时的钩子
        onSuccess(response, file, fileList) {
            // console.log('文件响应', response);
            this.fileName = response.data.name;
            this.getAfterFileName(this.fileName);
            this.signImage = response.data.url;
            console.log(this.signImage);
        },
        handleChange(file, fileList) { },

    },
    mounted() {
        this.getHttpList();

    },
    components: {
        breadcrumb,
    },
};
</script>
  
<style lang="scss" scoped>
.control {
    min-height: 76px;
    max-height: 106px;


    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 29px;
    flex-wrap: wrap;
    .BtnStyle{
        margin:10.5px 15px 10.5px 0;
    }


    .inputItem {
        display: flex;
        align-items: center;
        margin:10.5px 60px 10.5px 0;

        >.title {
            color: #262626;
            font-size: 12px;
            margin-right: 7px;
        }

        >.inputBox {
            width: 160px;

            ::v-deep .el-input__inner {
                height: 32px;
                font-size: 12px;
            }

            ::v-deep .el-input__inner::placeholder {
                color: #c3c3c3;
                font-size: 12px;
            }
        }

        ::v-deep .el-input__icon {
            line-height: 0;
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 213px);
    background-color: #fff;

    .list {
        height: calc(100% - 48px);
        padding: 0 30px;

        ::v-deep .el-table__body-wrapper {
            height: calc(100vh - 308px);
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            height: 48px;
            padding: 0;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }

        .tag {
            width: 63px;
            height: 28px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin: 0 auto;

            .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-right: 4px;
            }

            &.yellow {
                background-color: #FFFCE8;
                color: #F9AA0D;

                .dian {
                    background-color: #F9AA0D;
                }
            }

            &.dispatched {
                background-color: #ecf5fe;
                color: #1890ff;

                .dian {
                    background-color: #1890ff;
                }
            }
        }

        .stateBtns {
            height: 30px;
            width: 76px;

            ::v-deep .el-button {
                height: 30px;
                width: 76px;
                font-size: 12px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 30px;
            }

            .waitPass {
                background-color: #ecf5fe;
                color: #1890ff;
            }

            .noPass {
                background-color: #fde8e9;
                color: #f7555d;
            }
        }
    }

    .paginationBox {
        border-top: 1px solid #f0f0f0;
        width: 100%;
        background-color: #fff;
        display: flex;
        height: 48px;
        align-items: center;
        padding: 0 30px;

        .pagination {
            margin-left: auto;
        }
    }
}

.dialog {
    ::v-deep .el-dialog__header {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;
        color: #262626;
        font-size: 14px;
        font-weight: bold;
        height: 50px;
    }

    ::v-deep .el-dialog__title {
        font-size: 14px;
        color: #303133;
        font-weight: bold;
    }

    //关闭图标
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
        font-size: 15px;
    }

    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-form-item__label {
        line-height: 32px;
        font-size: 12px;
        color: #262626;
        padding-top: 4px;
    }

    .upload {
        .uploadBtn {
            width: 80px;
            height: 32px;
            background-color: #1890ff;
            font-size: 12px;
            color: #fff;
            cursor: pointer;
            border-radius: 4px;
            transition: 0.2s;
            margin-right: 12px;
            margin-bottom: 8px;

            &:hover {
                opacity: 0.8;
            }
        }

        .el-upload__tip {
            color: #cccccc;
            font-size: 12px;
        }

        ::v-deep .el-upload-list {
            background-color: #eef3f9;
        }
    }

    .cancelBtn {
        width: 80px;
        height: 36px;
        border: 1px solid #d9d9d9;
        color: #262626;
        font-size: 12px;
        border-radius: 4px;
        background-color: #fff;
        transition: 0.2s;

        &:hover {
            color: #1890ff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
    }

    .submitBtn {
        background-color: #1890ff;
        width: 80px;
        height: 36px;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>
  